<template>
	<!-- <view>文章内容</view> -->
	<view class="news_detail">
		<view class="title">{{articleContent.articleTitle}}</view>
		<view class="info">
			<text>发表时间：{{articleContent.createTime}}</text>
			<text>浏览：{{articleContent.articleBrowseNums}}</text>
		</view>
		<view class="content">
			<rich-text :nodes="articleContent.articleContent"></rich-text>
		</view>
		<view class="addComment">
			<input class="uni-input" confirm-type="search" v-model="commentContent" placeholder="请编写您的评论" />
			<button size="mini" type="primary" @click="addComments" plain>提交</button>
		</view>
		<!-- 所有评论 -->
		<view class="comment" v-for="item in comments">
			{{item.userName}}: {{item.commentContent}}
		</view>
		<view class="zan">
			<button size="mini" type="primary" class="a" @click="like" plain>点赞</button>
			<button size="mini" type="primary" class="a" @click="attention" plain>关注</button>
			<button size="mini" type="primary" class="a" @click="collect" plain>收藏</button>
			<button size="mini" type="primary" class="a" open-type="share" @click="onShareAppMessage" plain>分享</button>
		</view>
	</view>
</template>

<script>
	export default{
		// 微信分享功能
		onShareAppMessage(event){
			console.log(event)
			return{
				title:this.articleTitle,
				imageUrl:this.articleContent.articleFile,
				path:'pages/bbs/contents/index?articleId='+this.articleId
			}
		  },
		data() {
			return{
				articleId: 0,
				articleTitle:'',
				writerId: 0,
				articleContent:{},
				comments: [],
				commentContent: '',
			}
		},
		methods:{
			getArticleContent(){
				uni.request({
				    url: `http://localhost:7000/bbs/bbs/getArticleContent/`+this.articleId, //接口地址。
					method:'POST',
				    success: (res) => {
				        console.log(res.data);
						this.articleContent = res.data.articleMessahe
						this.articleTitle = res.data.articleMessahe.articleTitle
						this.writerId = res.data.articleMessahe.userId
						this.comments = res.data.commentMessage
						console.log("comments:"+this.comments)
				    }
				});
			},
			onLoad(options){
				console.log(options)
				this.articleId = options.articleId
				this.getArticleContent()
			},
			like(){
				uni.request({
				    url: `http://localhost:7000/bbs/bbs/likeArticle/`, //接口地址。
					data:{
						articleId: this.articleId,
						articleTitle: this.articleTitle,
						userId: 6,
						userName: "zhangsan"
					},
					method:'POST',
				    success: (res) => {
				        console.log(res.data);
				    }
				});
			},
			collect(){
				uni.request({
				    url: `http://localhost:7000/bbs/bbs/collectArticle/`, //接口地址。
					data:{
						userId: 6,
						articleId: this.articleId,
						articleTitle: this.articleTitle,
					},
					method:'POST',
				    success: (res) => {
				        console.log(res.data);
				    }
				});
			},
			attention(){
				uni.request({
				    url: `http://localhost:7000/bbs/bbs/attentionWriter/`, //接口地址。
					data:{
						writerId: this.writerId,
						userId: 6,
						userName: "李四",
					},
					method:'POST',
				    success: (res) => {
				        console.log(res.data);
				    }
				});
			},
			addComments(){
				uni.request({
				    url: `http://localhost:7000/bbs/bbs/commentArticle/`, //接口地址。
					data:{
						articleId: this.articleId,
						articleTitle: this.articleTitle,
						userId: 223,
						userName: "狗剩",
						commentContent: this.commentContent,
					},
					method:'POST',
				    success: (res) => {
						this.commentContent = '' 
						// Location.reload()
						uni.showToast({
							title: res.data.msg,
							duration: 2000
						});
				        console.log(res.data);
				    }
				});
			},
			// uni.getStorage({
			//     key: 'userId',
			//     success: function (res) {
			//         console.log(res.data);
			//     }
			// });
			// this.text = 'request success';
		}
	}
</script>

<style lang="scss">
	.news_detail{
		font-size: 30rpx;
		padding: 0 20rpx;
		.title{
			text-align: center;
			width: 710rpx;
			display: block;
			margin: 20rpx 0;
		}
		.info{
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;
		}
		.content{
			margin-bottom: 50rpx;
		}
		.addComment{
			display: flex;
			.uni-input{
				width: 580rpx;
				height: 70rpx;
			}
			margin-bottom: 20rpx;
		}
		.comment{
			margin-top: 20rpx;
		}
	}
	.zan{
		position: fixed;  
		bottom: 0rpx;
	}
	.a{
		margin-left: 70rpx;
	}
</style>
